<template>
    <div id="app" style="background-color: #edf1f7 ">
        <div class="tab-container">
            <a-tabs default-active-key="1" @change="callback" tab-position="left">
                <a-tab-pane key="1" tab="我的主页">
                    <div class="section-body">
                        <h2>个人信息</h2>
                        <div class="section">
                            <div class="section-1">
                                <span>昵称</span>
                                <a-button class="modify-btn" @click="showNicknameModal = true">修改</a-button>
                            </div>
                            <div>{{ $store.state.userInfo.nickname }}</div>
                            <a-divider></a-divider>
                            <div class="section-2">
                                <span>手机号</span>
                                <a-button class="modify-btn" @click="showPhoneModal = true">修改</a-button>
                            </div>
                            <div>{{ $store.state.userInfo.mobile }}</div>
                            <a-divider></a-divider>
                            <div class="section-3">
                                <span>密码</span>
                                <a-button class="modify-btn" @click="showPasswordModal = true">修改</a-button>
                            </div>
                            <div>******</div>
                            <a-divider></a-divider>
                            <div class="section-4">
                                <div><img :src="$store.state.userInfo.avatarUrl" alt=""></div>
                                <a-button class="modify-btn" @click="showAvatarModal = true">更换头像</a-button>
                            </div>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="我的课程" force-render>
                    <p>我的课程</p>
                </a-tab-pane>
                <a-tab-pane key="3" tab="我的订单">
                    <p>我的订单</p>
                </a-tab-pane>
            </a-tabs>
        </div>

        <!-- 昵称修改弹窗 -->
        <a-modal :visible="showNicknameModal" title="修改昵称" @ok="handleNicknameOk" @cancel="showNicknameModal = false">
            <a-form>
                <a-form-item label="新昵称">
                    <a-input v-model="newNickname" />
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 手机号修改弹窗 -->
        <a-modal :visible="showPhoneModal" title="修改手机号" @ok="handlePhoneOk" @cancel="showPhoneModal = false">
            <a-form>
                <a-form-item label="新手机号">
                    <a-input v-model="newPhone" />
                </a-form-item>
                <a-form-item label="验证码">
                    <a-input v-model="phoneCode" />
                    <a-button @click="getVerificationCode">获取验证码</a-button>
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 密码修改弹窗 -->
        <a-modal :visible="showPasswordModal" title="修改密码" @ok="handlePasswordOk" @cancel="showPasswordModal = false">
            <a-form>
                <a-form-item label="新密码">
                    <a-input-password v-model="newPassword" />
                </a-form-item>
                <a-form-item label="确认密码">
                    <a-input-password v-model="confirmPassword" />
                </a-form-item>
            </a-form>
        </a-modal>
            <!-- 更换头像弹窗 -->
    <a-modal :visible="showAvatarModal" title="更换头像" @ok="handleAvatarOk" @cancel="showAvatarModal = false">
        <a-form>
            <a-form-item label="选择头像">
                <a-upload
                    action="#"
                    list-type="picture-card"
                    :show-upload-list="false"
                    @change="handleAvatarChange"
                >
                    <div>
                        <plus-outlined />
                        <div style="margin-top: 8px">上传</div>
                    </div>
                </a-upload>
            </a-form-item>
        </a-form>
    </a-modal>
    </div>
</template>

<script>

export default {
    name: 'PersonalBody',
    components: {

    },
    data() {
        return {
            showNicknameModal: false,
            showPhoneModal: false,
            showPasswordModal: false,
            newNickname: '',
            newPhone: '',
            phoneCode: '',
            newPassword: '',
            confirmPassword: ''
        };
    },
    methods: {
        callback(key) {
            console.log(key);
        },
        handleNicknameOk() {
            console.log('新昵称:', this.newNickname);
            this.showNicknameModal = false;
        },
        handlePhoneOk() {
            console.log('新手机号:', this.newPhone, '验证码:', this.phoneCode);
            this.showPhoneModal = false;
        },
        getVerificationCode() {
            console.log('获取验证码逻辑');
        },
        handlePasswordOk() {
            if (this.newPassword !== this.confirmPassword) {
                console.log('两次输入的密码不一致');
                return;
            }
            console.log('新密码:', this.newPassword);
            this.showPasswordModal = false;
        }
    }
};
</script>

<style lang="scss" scoped>
#app {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
}

.tab-container {
    display: flex;
    width: 100%;
    background-color: #fff;
}

/* 可根据需求调整宽度比例 */
.a-tabs {
    width: 100%;
}

/* 设置标签页垂直排列 */
.ant-tabs-tabpane {
    padding: 20px;
}

.ant-tabs-nav-wrap {
    /* 可根据需求调整标签宽度 */
    min-width: 150px;
}

/* 优化布局，让标签栏和内容区域更美观 */
.ant-tabs-left>.ant-tabs-content-holder>.ant-tabs-content>.ant-tabs-tabpane,
.ant-tabs-left>.ant-tabs-nav {
    flex: 1;
}

.modify-btn {
    border: none;
    background-color: transparent;
    color: blue;
    /* 移除按钮默认的内阴影效果 */
    box-shadow: none;

    /* 鼠标悬停时的样式 */
    &:hover {
        color: darkblue;
    }

    /* 按钮点击时的样式 */
    &:active {
        color: darkblue;
    }
}

.ant-modal-footer {
    text-align: center;
}

.section-body {
    background-color: #fff;

    .section {
        width: 920px;
        margin-left: 50px;

        .section-1,
        .section-2,
        .section-3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100px;
            margin-bottom: 20px;
            // background-color: #fff;
            border-radius: 4px;
        }
        .section-4 {
            display: flex;
            flex-direction: column; 
            // justify-content: center;
            align-items: center;
            width: 100%;
            margin-bottom: 20px;
            :first-child{
                width: 400px;
                height: 250px;
                img {
                    width: 100%;
                    height: 100%;
                }
            } 
            .modify-btn {
                margin-top: 10px;
            }
        }

    }
}
</style>